<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3中组合复杂动画效果</title>
	<style>
		/*定义css3动画*/
		@-webkit-keyframes animate{
			0%{opacity: 0.5;}
			50%{opacity: 0.1;}
			100%{opacity: 1}
		}
		@-moz-keyframes animate{
			0%{opacity: 0.5}
			50%{opacity: 0.1;}
			100%{opacity: 1;}
		}
		@-o-keyframes animate{
			0%{opacity: 0.5;}
			50%{opacity: 0.1;}
			100%{opacity: 1;}
		}
		@keyframes animate{
			0%{opacity: 0.5;}
			500%{opacity: 0.1;}
			100%{opacity: 1;}
		}
		/*简单定义帧也可以使用from to*/
		@-webkit-keyframes animate-move{
			from{width: 200px;}
			to  {width: 100px;}
		}
		@-moz-keyframes animate-move{
			from{width: 200px;}
			to  {width: 100px;}
		}
		@-o-keyframes animate-move{
			from{width: 200px;}
			to  {width: 100px;}
		}
		#logo{
			-webkit-animation: animate 2s infinite,animate-move 1s infinite;
			-moz-animation: animate 2s infinite,animate-move 1s infinite;
			-o-animation: animate 2s infinite,animate-move 1s infinite;
			animation: animate 2s infinite,animate-move 1s infinite;
		}
		div{
			width: 200px;
			height: 200px;
			background: orange;
		}
	</style>
</head>
<body>
	<div id="logo"></div>
</body>
</html>